<template>

  <div class="wrap swiper-no-swiping">
    <swiper :options="swiperOption" v-if="portList.length > 0" @mouseenter.native="enter" @mouseleave.native="leave"
      ref="mySwiper">
      <swiper-slide v-for="(port, index) in portList" :key="port.code">
        <div class="port-list swiper-slide">
          <div class="port-item">
            <div class="port-name" @dblclick="onRefresh(index)">
              {{ port.name }}
              <!-- <div class="subtitme">日总计：{{ port.sort }}</div> -->
              <span class="work-nav-btns__btn-num" style="color: #00ff00;">
                {{ port.sort || port.sort == 0 ? `(日总计：${port.sort})` : '' }}
              </span>
            </div>
            <div class="port-work-list">
              <PageScroll :probeType="index" :itemInfo="port" fromType="onePort">
              </PageScroll>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
      <div class="swiper-button-prev" slot="button-prev">
        <a-icon type="double-left" :style="{ fontSize: '40px', color: 'orange' }" />
      </div>
      <div class="swiper-button-next" slot="button-next">
        <a-icon type="double-right" :style="{ fontSize: '40px', color: 'orange' }" />
      </div>
      <!-- <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
  </div>
</template>

<script>
import PageScroll from './components/PageScroll';
import WorkItem from './components/WorkItem.vue';
import { swiper, swiperSlide } from "vue-awesome-swiper";
const PAGE_SIZE = 10;
export default {
  components: {
    PageScroll,
    WorkItem,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      portList: [
      ],
      swiperOption: {
        loop: false,
        // observer: true,//修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true,//修改swiper的父元素时，自动初始化swiper
        autoplay: false,
        // {
        //   delay: 0,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false
        // },
        // 显示分页
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true //允许分页点击跳转
        // },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        slidesPerView: 4,
        touchEventsTarget: 'container',
      }
    };
  },
  created() { },
  mounted() {
    let query = this.$route.query;
    if (Object.keys(query).length > 0 && query.port) {
      let protName = query.port;
      this.getTabList({ protName: protName });
    } else {
      this.$route.go(-1);
    }

  },
  methods: {
    // 关于swiper
    changeSwiperStatu(type) {
      if (swiper && swiper.autoplay) {
        swiper.autoplay.stop()
      }
      return;
      let ref = this.$refs.mySwiper;
      if (ref) {
        let swiper = ref.swiper;
        if (swiper) {
          if (type == 'stop') {
            swiper.autoplay.stop()
          } else if (type == 'start') {
            swiper.autoplay.start()
          }
        }
      }
    },
    enter() {
      this.changeSwiperStatu('stop');
    },
    leave() {
      this.changeSwiperStatu('stop');
      return;
      this.changeSwiperStatu('start');
    },
    // 获取当前港口的子公司
    getTabList(aParams) {
      let params = {
        protName: this.protName,
        ...aParams,
      }
      this.getAxios(this.$queryCompanyByPort, params).then((res) => {
        if (res.code == 0) {
          let list = res.data;
          let portList = list.map(val => {
            return {
              ...val,
              name: val.name,
              code: val.id,
              data: [],
            }
          })
          this.portList = portList;
        }
      })
        .catch(() => { })
        .finally(() => {
        });
    },
    onRefresh(index) {
      this.$bus.$emit("onRefresh", index);
    },
  },
  beforeDestroy() {
    if (this.swiper) {
      this.swiper.destroy();
      this.swiper = null;
    }
  }
};
</script>

<style lang="less" scoped>
.swiper-button-prev,
.swiper-button-next {
  background-image: none;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev.a-icon-left,
.swiper-button-next.a-icon-right {
  // font-size: 20px;
}

.wrap {
  height: calc(88vh);

  .port-list {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: calc(87vh - 0px);
    min-height: calc(87vh - 0px);
    padding: 0px 10px;

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      right: -1px;
      top: 0;
      width: 2px;
      background: url(~@/assets/svg/port-split.svg) no-repeat;
    }

    .port-item {
      height: 100%;
    }

    .port-name {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 60px;
      background: url(~@/assets/svg/port-name-bg.svg) center no-repeat;
      font-size: 24px;
      font-weight: 900;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }

    .subtitme {
      position: absolute;
      top: 0px;
      left: 40px;
      font-size: 14px;
    }

    .port-work-list {
      width: 100%;
      padding: 0px 0px 14px;
      height: calc(100vh - 160px);
      overflow: hidden;
      width: calc(100% - 0px);
      margin-left: 5px;

      .listBox {
        margin-top: 10px;
        padding: 0px;
      }
    }

    .port-work-item {
      margin-bottom: 10px;
    }

  }

}
</style>
